<template>
    <el-drawer v-model="props.visible" :title="title" @close="handleClose" size="50%">
        <el-row :gutter="8" class="mb8">
            <el-col :span="1.5">
                <el-button type="success" @click="handleClickInStorage">快速调拨申请</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="warning" >产品数码打印</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="primary" >库存详情</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="success" @click="handleClickFastIn">快速入库</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="success" >快速出库</el-button>
            </el-col>
        </el-row>
        <el-table :data="componentList" highlight-current-row @current-change="handleCurrentChange">
            <el-table-column label="部件名称" prop="componentName"></el-table-column>
            <el-table-column label="库存总量" prop="totalInventory"></el-table-column>
            <el-table-column label="在产" prop="inProductionInventory"></el-table-column>
            <el-table-column label="外协库存" prop="outerInventory"></el-table-column>
            <el-table-column label="三江仓库" prop="privateInventory"></el-table-column>
            <el-table-column label="车间待产" prop="inProductionInventory"></el-table-column>
        </el-table>
        <el-dialog v-model="inStorageVisible" title="快速调拨申请" width="30%">
            <el-form>
                <el-form-item label="到货仓库">
                    <span>三江仓库</span>
                </el-form-item>
            </el-form>
            <el-form ref="inStoreFormRef" :model="inStoreFormData">
                <el-table :data="inStoreFormData">
                    <el-table-column label="部件名称" prop="semiChildrenName"></el-table-column>
                    <el-table-column label="发出仓库">
                        <template #default="scope">
                            <el-form-item>
                                <el-select v-model="scope.row.warehouseType">
                                    <el-option v-for="item in props.warehouses" :key="item.value" :label="item.label" :value="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                        </template>
                    </el-table-column>
                    <el-table-column label="调拨数量">
                        <template #default="scope">
                            <el-form-item>
                                <el-input type="number" v-model="scope.row.number"></el-input>
                            </el-form-item>
                        </template>
                    </el-table-column>
                    <el-table-column label="到货日期">
                        <template #default="scope">
                            <el-form-item :prop="scope.row.date">
                                <el-date-picker
                                    v-model="scope.row.date"
                                    type="date"
                                    format="YYYY-MM-DD"
                                    value-format="YYYY-MM-DD"
                                />
                            </el-form-item>
                        </template>
                    </el-table-column>
                    <el-table-column label="备注">
                        <template #default="scope">
                            <el-form-item>
                            <el-input v-model="scope.row.remark"/>
                        </el-form-item>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button  type="primary" >确 定</el-button>
                    <el-button @click="handleCloseInStorage">取 消</el-button>
                </div>
            </template>
        </el-dialog>
        <el-dialog v-model="welfarehouseDetailVisible" title="库存详情" width="20%" >
        </el-dialog>
        <el-dialog v-model="fastInStorageVisible" title="快速入库">
            
        </el-dialog>
        <el-dialog></el-dialog>
    </el-drawer>
</template>

<script setup lang="ts">
import { ref,watch } from 'vue';
import type { FormInstance } from 'element-plus';
const props = defineProps(['visible', 'data', 'semi', 'warehouses']);
const emits = defineEmits(['close']);
const title = ref<string>();
const componentList = ref<any[]>([]);
const currentRow = ref();
const inStorageVisible = ref(false);
const welfarehouseDetailVisible = ref(false);
const inStoreFormRef = ref<FormInstance>();
const inStoreFormData = ref<any[]>([]);
const fastInStorageVisible = ref(false);
const fastInStorageData = ref<any[]>([]);
const fastOutStorageVisible = ref(false);
const fastOutStorageData = ref<any[]>([]);

watch(()=>props.data,(newData)=>{
    title.value = `${newData.specsDetail} 包含部件详情`
},{deep: true});

console.log(props.warehouses);

watch(()=>props.semi, (newData)=>{
    componentList.value = newData;
    inStoreFormData.value = newData.map((item:any)=>{
        return {
            semiId: item.id,
            semiChildrenName: item.componentName,
            number: undefined,
            date: undefined,
            warehouseType: undefined,
            remark: undefined
        }
    });
    // console.log(inStoreFormData.value);
    // console.log(newData);
},{deep: true})

const handleCurrentChange = (val: any) => {
    currentRow.value = val;
};

const selectedComponentName = computed(()=>{
    return currentRow.value.componentName;
});

/** 点击调拨 */
const handleClickInStorage = ()=>{
    inStorageVisible.value = true;
};

/** 点击快速入库 */
const handleClickFastIn = () => {
    fastInStorageVisible.value = true;
};


const handleClose = ()=>{
    emits('close');
    currentRow.value = undefined;
};

const handleCloseInStorage = ()=>{
    inStorageVisible.value = false;
};

</script>

<style lang="scss" scoped>
.dialog-footer{
    display: flex;
    justify-content: center;
}
</style>